<template>
	<view>
		<u-navbar title="专利监管" @leftClick="leftClick" :autoback="true"></u-navbar>
		<u-search
			placeholder="请输入关键字" 
			v-model="patentName" 
			inputAlign="center"
			shape="round"
			borderColor="#bbb"
			:showAction="true" actionText="搜索" :animation="false"
			@custom="search()"
		></u-search>
		<view class="flex-row space-x-40 section_4">
		  <view class="flex-row justify-between group_5">
		    <!-- <view class="flex-row">
		      <text class="font_3">{{titles[condition.patentType] || '全部类型'}}</text>
		      <i class="iconfont icon-jiantou-xia icon-xie" @click="handleBtn('show')"></i>
			  <u-picker :show="show" :columns="columns" keyName="label" @confirm="confirm"></u-picker>
		    </view> -->
		    <view class="flex-row">
		      <text class="font_3">申请日</text>
		      <view class="icon-1">
		      	<u-icon name="arrow-up-fill" class="icon_arrow" :color="applyDate == 'up'? '#5372fc' : '#999'" size="6" @click="arrow('up','applyDate')"></u-icon>
				<u-icon name="arrow-down-fill" size="6" :color="applyDate == 'down'? '#5372fc' : '#999'" @click="arrow('down','applyDate')"></u-icon>
		      </view>
		    </view>
		    <view class="flex-row">
		      <text class="font_3">授权日</text>
		      <view class="icon-1">
		      	<u-icon name="arrow-up-fill" class="icon_arrow" :color="authDate == 'up'? '#5372fc' : '#999'" size="6" @click="arrow('up','authDate')"></u-icon>
		      	<u-icon name="arrow-down-fill" size="6" :color="authDate == 'down'? '#5372fc' : '#999'"  @click="arrow('down','authDate')"></u-icon>
		      </view>
		    </view>
		    <view class="flex-row">
		      <text class="font_3">价格</text>
		      <view class="icon-1">
		      	<u-icon name="arrow-up-fill" class="icon_arrow" :color="unitPrice == 'up'? '#5372fc' : '#999'" size="6" @click="arrow('up','unitPrice')"></u-icon>
		      	<u-icon name="arrow-down-fill" size="6" :color="unitPrice == 'down'? '#5372fc' : '#999'" @click="arrow('down','unitPrice')"></u-icon>
		      </view>
		    </view>
		  </view>
		  <view class="flex-row group_4">
			  <view class="" @click="handleBtn('rightPop')">
			  	
		    <text class="font_3 text_6">筛选</text>
		    <image
				
		      class="image_8"
		      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/632afc43e391320011695f3b/16647804931507484357.png"
		    />
			  </view>
			<u-popup :show="rightPop" mode="right"  @close="handleBtn('rightPop')">	
				<search @handleBtn="handleBtn"></search>
			</u-popup>
		  </view>
		</view>
		
		<view class="flex-col list-item section_6" v-for="(item,index) in supervises" :key="index">
			  <view class="flex-row group_6 view_6" @click="jumpDetails(item)">
				<text class="font_4 patent-name">{{item.patentName || '-'}}</text>
				<view class="flex-col items-center text-wrapper view_7"><text class="font_9">{{['发明','实用','外观'][item.patentType] || '发明'}}</text></view>
				<view v-if="item.source == 1" class="flex-col items-center text-wrapper_3"><text class="font_10 text_10">代监管</text></view>
			  </view>
			<view class="flex justify-between">
				<view class="">
					  <view class="flex-row group_7">
						<text class="font_6">专利号：</text>
						<text class="font_7 text_7">{{item.patentNo || '-'}}</text>
					  </view>
					  <view class="flex-row group_8">
						<text class="font_6">缴费截止日：</text>
						<text class="font_7 text_8">{{item.paymentEndDate || '-'}}</text>
					  </view>
					  <view class="flex justify-between">
						  <view class="flex-row justify-between group_9">
							<view class="flex-col space-y-27 group_10 view_8">
							  <view class="flex-row space-x-8">
								<text class="font_6">应缴费用：</text>
								<text class="font_7 text_9">{{item.unpayFee || '-'}}</text>
							  </view>
							  <view class="flex-row space-x-7">
								<text class="font_6">案件状态：</text>
								<text class="font_8">{{item.caseStatus || '-'}}</text>
							  </view>
							</view>
						  </view>
					  </view>
				</view>
				<view class="text-center" :class="{'item-patent':item.isSupervise != 2,'item-text':item.isSupervise == 2 && ![2,4].includes(item.level)}">
					<view v-if="item.level == 2" @click="openPage(1)"  class="flex-col items-center text-wrapper_2"><text style="color: #fff;" class="font_2">答复合作</text></view>
					<view v-if="item.level == 4" @click="openPage(0)" class="flex-col items-center text-wrapper_2"><text style="color: #fff;" class="font_2">出售专利</text></view>				
				</view>
			</view>
			
		</view>
		<view class="more" @click="getInitData('more')" v-if="supervises.length >= 6">
			加载更多
		</view>
		<image
			@click="openPage('add')"
			class="text-wrapper_2 image_14"
			src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/632afc43e391320011695f3b/16647804932416092347.png"
		/>
		<u-empty v-if="!supervises.length" class="empty-data">
		</u-empty>
	</view>
</template>

<script>
	import search from './search.vue';
	import {getPatent} from '@/api/index.js'
	export default {
		components:{search},
		data() {
			return {
				patentName:'',
				unitPrice:'',
				applyDate:'',
				authDate:'',
				columns:[[
					{label:'全部专利',key:''},
					{label:'发明专利',key:'0'},
					{label:'实用新型',key:'1'},
					{label:'外观设计',key:'2'}
				]],
				titles:{
					'0':'发明专利',
					'1':'实用新型',
					'2':'外观设计'
				},
				show:false,
				rightPop:false,
				supervises:[],
				indexSign:1,
				condition:{
					pageSize:10,
					pageNo:1,
				},
				recommends:[
					{
						title:'专利交易',
						des:`专利以有偿的方式在不同的经济主体间的转移，其中，
							买方取得专利使用权或所有权，卖方获得超额经济...`,
						type:'deal'
					},
					{
						title:'专利答复',
						des:`专利申请人收到国知局驳回决定后若对驳回决定不服，
							可以在驳回决定收到之日起3个月内提复审，申请人...`,
						type:'answer'
					}
				], 
			};
		},
		onLoad() {
			console.log('111')
			this.getInitData();
		},
		methods:{
			getInitData(type){
				if(type) {
					this.indexSign += 1;
				}
				this.condition.pageSize *= this.indexSign;
				getPatent(this.condition).then(res => {
					if(res.code === 200) {
						this.supervises = res.data.list;
						// this.total = res.data.totalCount;
					}
				})
			},
			leftClick(){
				if (getCurrentPages().length > 1) {
					uni.navigateBack();
				} else {
					uni.switchTab({
						url: '../../pages/index/index'
					})
				}
			},
			openPage(type){
				if(type != 'add') {
					let info = JSON.stringify(this.recommends[type])
					uni.navigateTo({
						url:`../patentCommonPage/patentCommonPage?info=${info}`
					})
				}else {
					uni.navigateTo({
						url:`../supervise/add`
					})
				}
			},
			jumpDetails(item){
				uni.navigateTo({
					url: `../index/newdetails?id=${item.id}`
				});
			},
			search(value){
				this.condition.patentName = this.patentName;
				this.getInitData();
			},
			arrow(value,type) {
				let arr = ['authDate','unitPrice','applyDate'];
				arr.forEach(item => {
					if(item != type) {
						this[item] = ''
					}
				})
				if(this[type] == value) {
					this[type] = '';
					this.condition.orderBy = '';
				} else this[type] = value;
				this.condition.orderBy = type;
				this.condition.orderSort = this[type] ? this[type] == 'down' ? 'desc' : 'asc' : null;
				this.getInitData();
			},
			handleBtn(type,sign,info) {
				this[type] = !this[type];
				if(sign) {
					this.condition = Object.assign(this.condition,info);
					this.getInitData();
				}
			},
			confirm({value}){
				this.condition.patentType = value[0].key;
				this.show = false;
				this.getInitData();
			},
		}
	}
</script>

<style lang="scss" scoped>
.light {
	color: #5372fc;
}
.icon-xie {
	margin-top: -6rpx;
}
.icon_arrow {
	margin-bottom: 2rpx;
}
.space-x-40 {
  & > view:not(:first-child),
  & > text:not(:first-child),
  & > image:not(:first-child) {
    margin-left: 40rpx;
  }
  .group_5 {
    flex: 1 1 auto;
    align-self: center;
    .image_13 {
      margin: 9rpx 0 10rpx 4rpx;
      flex-shrink: 0;
      width: 17rpx;
      height: 9rpx;
    }
    .image_9 {
      flex-shrink: 0;
      width: 11rpx;
      height: 17rpx;
    }
    .image_10 {
      margin: 6rpx 0 5rpx;
    }
    .image_11 {
      margin: 7rpx 0 4rpx;
    }
    .image_12 {
      margin: 6rpx 0 5rpx 4rpx;
    }
	.icon-1 {
		margin-top: 2rpx;
	}
  }
  .group_4 {
    margin-right: 11rpx;
	margin-top: -10rpx;
    .text_6 {
      margin-left: 12rpx;
	  margin-right: 8rpx;
      align-self: center;
    }
    .image_8 {
      flex-shrink: 0;
      align-self: center;
      width: 24rpx;
      height: 25rpx;
    }
  }
  .font_3 {
    font-size: 28rpx;
    font-family: Microsoft YaHei;
    line-height: 28rpx;
    color: #666666;
  }
}
.section_4 {
  margin-top: 24rpx;
  padding: 0 25rpx;
  padding-bottom: 24rpx;
  border-bottom: 16rpx solid #f6f4f8;
  background-color: #ffffff;
}
.list-item {
  padding: 31rpx 30rpx 41rpx;
  background-color: #ffffff;
  .group_6 {
    align-self: flex-start;
    line-height: 29rpx;
    .font_4 {
      font-size: 30rpx;
      font-family: Microsoft YaHei;
      line-height: 30rpx;
      color: #5677fc;
	  width:60%;
	  overflow:hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
    }
    .text-wrapper {
      padding: 2rpx 0 4rpx;
      flex-shrink: 0;
      background-color: #ffffff;
      border-radius: 4rpx;
      width: 70rpx;
      height: 26rpx;
      border: solid 1rpx #37c637;
      .font_9 {
        font-size: 19rpx;
        font-family: Microsoft YaHei;
        line-height: 18rpx;
        color: #2f87f2;
      }
    }
    .view_7 {
      border: solid 1rpx #2f87f2;
      margin-left: 46rpx;
      margin-bottom: 3rpx;
    }
    .text-wrapper_3 {
      margin-left: 20rpx;
      margin-bottom: 3rpx;
      padding: 4rpx 0;
      flex-shrink: 0;
      background-color: #e9bf1a;
      border-radius: 14rpx;
      width: 110rpx;
      height: 28rpx;
      .font_10 {
        font-size: 19rpx;
        font-family: Microsoft YaHei;
        line-height: 21rpx;
        color: #ffffff;
      }
      .text_10 {
        font-size: 20rpx;
        line-height: 20rpx;
      }
    }
  }
  .view_6 {
    align-self: initial;
    line-height: initial;
  }
  .group_7 {
    margin-top: 19rpx;
    .text_7 {
      margin-top: 3rpx;
    }
  }
  .group_8 {
    margin-top: 25rpx;
    .text_8 {
      margin-top: 3rpx;
    }
  }
  .font_6 {
    font-size: 26rpx;
    font-family: Microsoft YaHei;
    line-height: 26rpx;
    color: #777777;
  }
  .font_7 {
    font-size: 26rpx;
    font-family: Microsoft YaHei;
    line-height: 21rpx;
    color: #444444;
  }
  .text-wrapper_2 {
    margin-top: 20rpx;
    padding: 8rpx 0;
    background-color: #5372fc;
    border-radius: 4rpx;
    width: 180rpx;
    height: 60rpx;
  }
  
  .group_9 {
    margin-top: 25rpx;
	
    .space-y-27 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 27rpx;
      }
      .space-x-8 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-left: 8rpx;
        }
        .text_9 {
          margin-top: 3rpx;
        }
      }
      .space-x-7 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-left: 7rpx;
        }
        .font_8 {
          font-size: 26rpx;
          font-family: Microsoft YaHei;
          line-height: 26rpx;
          color: #444444;
        }
      }
    }
    .group_10 {
      margin-bottom: 3rpx;
    }
    .view_8 {
      margin-bottom: initial;
    }
    .text-wrapper_2 {
      margin-top: 20rpx;
      padding: 16rpx 0;
      background-color: #5372fc;
      border-radius: 4rpx;
      width: 180rpx;
      height: 60rpx;
      .font_2 {
        font-size: 28rpx;
        font-family: Microsoft YaHei;
        line-height: 28rpx;
        color: #ffffff !important;
      }
    }
  }
}
.section_6 {
	border-bottom: 16rpx solid #f6f4f8;
  padding: 30rpx 30rpx 40rpx;
  .text-center {
	  text-align: center;
  }
  
  .item-patent {
	display: flex;
	align-items: center;
  }
  .item-text{
	  margin-right: 40rpx;
	  display: flex;
	  align-items: center;
  }
}
.more {
	width: 100%;
		height: 88rpx;
		line-height: 80rpx;
		background: #fff;
		align-items: center;
		font-size: 32rpx;
	text-align: center;
}

.image_14 {
	  position: fixed;
	  bottom: 200rpx;
	  right: 60rpx;
    width: 80rpx;
    height: 80rpx;
  }
</style>
